<!--
  此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=mix-timeline-finance
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 500px;width:100%"></div>

    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"
    ></script>

    <script type="text/javascript">
          var dom = document.getElementById('container');
          var data2 = {{ data2|safe }};
          var seasons = data2.seasons;
          var options = [];

          function get_series(season,keys,data){
            let series = [];
            for(let i =0;i<keys.length;i++){
              let key = keys[i]
                let item = {
                  data:data[key][season]
                }
                series.push(item)
            }
            series.push({
              data:[
                {name:'篮板',value:data.篮板[`${season}sum`]},
                {name:'助攻',value:data.助攻[`${season}sum`]},
                {name:'抢断',value:data.抢断[`${season}sum`]},
                {name:'盖帽',value:data.盖帽[`${season}sum`]},
              ]
            })
            return series;
          }

          for (let i=0;i<seasons.length;i++){
            let season = seasons[i];
            let item = {
              title: { text: `${season}赛季数据` },
              series: get_series(season,data2.keys,data2.result)
            }
            options.push(item)
          }
          console.log(options)


          console.log(data2)
          var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
          });
          var app = {};

          var option;

          var dataMap = {};


      option = {
        baseOption: {
          timeline: {
            right: "0%",
            bottom: "0%",
            left: "0%",
            top: "0%",
            orient:'vertical',
            axisType: 'category',
            realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 3000,
            // controlStyle: {
            //     position: 'left'
            // },
            // 时间线
            data: data2.seasons,
            label: {
              formatter: function (s) {
                return new Date(s).getFullYear();
              }
            }
          },
          title: {
            top:10,
            subtext: ''
          },
          tooltip: {},
          legend: {
            type: 'scroll',
            width:"50%",
            top:20,
            data: data2.keys,
            selected: {
              三分命中数: false,
              三分命中率: false,
              罚球命中率: false
            }
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 30,
              end: 60,
              xAxisIndex: [0, 1],
              bottom:20
            },
            {
              type: 'inside',
              realtime: true,
              start: 30,
              end: 60,
              xAxisIndex: [0, 1]
            }
          ],
          calculable: true,
          grid: {
            top: 80,
            bottom: 100,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value.replace('\n', '');
                  }
                }
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: { interval: 0 },
              // x轴
              data: data2.teams,
              splitLine: { show: false }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: ''
            }
          ],
          series: [
            { name: '比赛场次', type: 'bar' },
            { name: '出场时间', type: 'bar' },
            { name: '得分', type: 'bar' },
            { name: '篮板', type: 'bar' },
            { name: '助攻', type: 'bar' },
            { name: '抢断', type: 'bar' },
            { name: '盖帽', type: 'bar' },
            { name: '投篮命中率', type: 'bar' },
            { name: '三分命中数', type: 'bar' },
            { name: '三分命中率', type: 'bar' },
            { name: '罚球命中率', type: 'bar' },
            {
              name: '得分',
              type: 'pie',
              center: ['75%', '35%'],
              radius: '28%',
              z: 100
            }
          ]
        },
        options: options
      };

          if (option && typeof option === 'object') {
            myChart.setOption(option);
          }

          window.addEventListener('resize', myChart.resize);
    </script>
  </body>
</html>
